<html>
<head>
  <title> [AccessFu] Speak landmarks</title>

  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />
  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="output.js"></script>
  <script type="application/javascript"
          src="jsatcommon.js"></script>
  <script type="application/javascript">

    function doTest() {
      // Test the following accOrElmOrID.
      var tests = [{
        accOrElmOrID: "nav",
        expectedUtterance: [[{"string": "navigation"}, "a nav"],
                            ["a nav", {"string": "navigation"}]],
        expectedBraille: [[{"string": "navigation"}, "a nav"],
                          ["a nav", {"string": "navigation"}]]
      }, {
        accOrElmOrID: "main",
        expectedUtterance: [[{"string": "main"}, "a main area"],
                            ["a main area", {"string": "main"}]],
        expectedBraille: [[{"string": "main"}, "a main area"],
                          ["a main area", {"string": "main"}]]
      }, {
        accOrElmOrID: "header",
        expectedUtterance: [
          [{"string": "banner"}, {"string": "header"}, "a header"],
          ["a header", {"string": "header"}, {"string": "banner"}]],
        expectedBraille: [
          [{"string": "banner"}, {"string": "headerAbbr"}, "a header"],
          ["a header", {"string": "headerAbbr"}, {"string": "banner"}]]
      }, {
        accOrElmOrID: "footer",
        expectedUtterance: [
          [{"string": "contentinfo"}, {"string": "footer"}, "a footer"],
          ["a footer", {"string": "footer"}, {"string": "contentinfo"}]],
        expectedBraille: [
          [{"string": "contentinfo"}, {"string": "footerAbbr"}, "a footer"],
          ["a footer", {"string": "footerAbbr"}, {"string": "contentinfo"}]]
      }, {
        accOrElmOrID: "article_header",
        expectedUtterance: [
          [{"string": "header"}, "a header within an article"],
          ["a header within an article", {"string": "header"}]],
        expectedBraille: [
          [{"string": "headerAbbr"}, "a header within an article"],
          ["a header within an article", {"string": "headerAbbr"}]],
      }, {
        accOrElmOrID: "article_footer",
        expectedUtterance: [
          [{"string": "footer"}, "a footer within an article"],
          ["a footer within an article", {"string": "footer"}]],
        expectedBraille: [
          [{"string": "footerAbbr"}, "a footer within an article"],
          ["a footer within an article", {"string": "footerAbbr"}]]
      }, {
        accOrElmOrID: "section_header",
        expectedUtterance: [[{"string":"header"}, "a header within a section"],
                            ["a header within a section", {"string":"header"}]],
        expectedBraille: [
          [{"string":"headerAbbr"}, "a header within a section"],
          ["a header within a section", {"string":"headerAbbr"}]]
      }, {
        accOrElmOrID: "section_footer",
        expectedUtterance: [
          [{"string": "footer"}, "a footer within a section"],
          ["a footer within a section", {"string": "footer"}]],
        expectedBraille: [
          [{"string": "footerAbbr"}, "a footer within a section"],
          ["a footer within a section", {"string": "footerAbbr"}]]
      }, {
        accOrElmOrID: "aside",
        expectedUtterance: [
          [{"string": "complementary"}, "by the way I am an aside"],
          ["by the way I am an aside", {"string": "complementary"}]],
        expectedBraille: [
          [{"string": "complementary"}, "by the way I am an aside"],
          ["by the way I am an aside", {"string": "complementary"}]]
      }, {
        accOrElmOrID: "main_element",
        expectedUtterance: [[{"string": "main"}, "another main area"],
                            ["another main area", {"string": "main"}]],
        expectedBraille: [[{"string": "main"}, "another main area"],
                          ["another main area", {"string": "main"}]]
      }, {
        accOrElmOrID: "complementary",
        expectedUtterance: [[{"string": "list"},
          {"string": "listItemsCount", "count": 1}, {"string": "complementary"},
          {"string": "listStart"}, "A complementary"], ["A complementary",
          {"string": "listStart"}, {"string": "complementary"},
          {"string": "list"}, {"string": "listItemsCount", "count": 1}]],
        expectedBraille: [["*", {"string": "complementary"}, "A complementary"],
                          ["*", "A complementary", {"string": "complementary"}]]
      }, {
        accOrElmOrID: "parent_main",
        expectedUtterance: [[{"string": "main"}, "a parent main",
          {"string": "complementary"}, "a child complementary"],
          ["a parent main", "a child complementary",
          {"string": "complementary"}, {"string": "main"}]],
        expectedBraille: [[{"string": "main"}, "a parent main",
          {"string": "complementary"}, "a child complementary"],
          ["a parent main", "a child complementary",
          {"string": "complementary"}, {"string": "main"}]]
      }, {
        accOrElmOrID: "child_complementary",
        expectedUtterance: [[{"string": "main"}, {"string": "complementary"},
          "a child complementary"], ["a child complementary",
          {"string": "complementary"}, {"string": "main"}]],
        expectedBraille: [[{"string": "complementary"},
          "a child complementary"], ["a child complementary",
          {"string": "complementary"}]]
      }];

      // Test outputs (utterance and braille) for landmarks.
      function testOutputOrder(aOutputOrder) {
        return function() {
          SpecialPowers.pushPrefEnv({
            "set": [[PREF_UTTERANCE_ORDER, aOutputOrder]]
          }, function() {
            tests.forEach(function run(test) {
              testOutput(test.expectedUtterance[aOutputOrder], test.accOrElmOrID,
                test.oldAccOrElmOrID, 1);
              testOutput(test.expectedBraille[aOutputOrder], test.accOrElmOrID,
                test.oldAccOrElmOrID, 0);
            });
            AccessFuTest.nextTest();
          });
        };
      }

      AccessFuTest.addFunc(testOutputOrder(0));
      AccessFuTest.addFunc(testOutputOrder(1));
      AccessFuTest.waitForExplicitFinish();
      AccessFuTest.runTests();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>
</head>
<body>
  <div id="root">
    <a target="_blank"
       href="https://bugzilla.mozilla.org/show_bug.cgi?id=888256"
       title="[AccessFu] Speak landmarks">
       Mozilla Bug 888256
       </a>
    <p id="display"></p>
    <div id="content" style="display: none"></div>
    <pre id="test"></pre>
    <nav id="nav">a nav</nav>
    <header id="header">a header</header>
    <footer id="footer">a footer</footer>
    <article id="article_with_header_and_footer">
      <header id="article_header">a header within an article</header>
      <footer id="article_footer">a footer within an article</footer>
    </article>
    <section id="section_with_header_and_footer">
      <header id="section_header">a header within a section</header>
      <footer id="section_footer">a footer within a section</footer>
    </section>
    <aside id="aside">by the way I am an aside</aside>
    <article id="main" role="main">a main area</article>
    <main id="main_element">another main area</main>
    <ul style="list-style-type: none;">
      <li role="complementary" id="complementary">
        A complementary
      </li>
    </ul>
    <main id="parent_main">
      a parent main
      <p id="child_complementary" role="complementary">a child complementary</article>
    </main>
  </div>
</body>
</html>
